<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <title>主页</title>
    <link rel="icon" href="../../../module/favicon.ico" type="image/ico">
    <link rel="stylesheet" href="../../../html/buyer/css/new-css.css">
    <link href="../../../module/css/bootstrap.min.css" rel="stylesheet">
    <link href="../../../module/css/materialdesignicons.min.css" rel="stylesheet">
    <link href="../../../module/css/style.min.css" rel="stylesheet">
    <script type="text/javascript" src="../../../module/js/jquery.min.js"></script>
    <script type="text/javascript" src="../../../module/js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../../module/js/perfect-scrollbar.min.js"></script>
    <script type="text/javascript" src="../../../module/js/main.min.js"></script>
    <script type="text/javascript" src="../../../module/js/Chart.js"></script>
</head>
<body>
<div class="row" style="padding: 0 20px 0 20px;">
    <div class="col-lg-12">
        <div class="card " >
            <div class="card-header">
                <div class="form-group has-feedback feedback-left row" >
                    <div class="col-xs-10">
                        <input type="text" id="" class="form-control" placeholder="你想搜索的商品">

                    </div>
                    <div class="col-xs-2">
                        <button class="btn btn-primary " id="check-username-button" style="margin: 0;padding: 4px 10px 4px 10px">
                            <a class="mdi mdi-magnify" style="color: #FFFFFF;font-size: 20px"></a>
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class="col-lg-12" style="">
        <div class="card">
            <div class="card-header">
                <div class="col-lg-4">
                    <span class="mdi mdi-cart-outline" style="font-size: 30px">购物车</span>
                    （全部***）
                </div>

            </div>
            <div class="card-body">
                <div class="table-responsive">
                    <table class="table" id="my-shopping-card-table">
                        <thead >
                        <tr>
                            <th class="text-center"><input id="check-all" type="checkbox" onChange="toggleAll(this)" /></th>
                            <th class="text-center">商品图片</th>
                            <th>商品信息</th>
                            <th class="text-center">价格</th>
                            <th class="text-center">数量</th>
                            <th class="text-center">总价</th>
                            <th class="text-center">操作</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th class="text-center" scope="row"><input name="dx" type="checkbox" /></th>
                            <td class="text-center" style=""><img class="gwc_tp text-center" src="../../module/images/img-slide-1.jpg" alt=""></td>
                            <td style="height:80px;width: 30% "><div >商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍商品介绍
                            </div></td>
                            <td class="text-center" style="line-height: 50px">
                                <div id="pro_price">6</div>
                            </td>
                            <td class="text-center" style="line-height: 50px">
                                <div id="myDiv" style="display: none">
                                    <input id="math_input" style="width: 50px;height: 20px" type="text" >
                                </div>
                                <div id="math" >1</div>
                            </td>
                            <td class="text-center" style="line-height: 50px "><div id="all_price"></div></td>
                            <td class="" style="line-height: 50px;display: flex">
                                <a id="button-confirm-1" style="flex: 1" href="#" onclick="action_confirm(1) ">修改</a>
                                <a id="button-update-1" style="flex: 1;display: none" href="#"  onclick="action_update(1)">确定</a>
                                <a href="" style="width: 50%">删除</a>
                            </td>
                        </tr>
                        <tr id="product-car-list">

                        </tr>
                        </tbody>
                    </table>
                </div>
            </div>

            <nav style="text-align: center">
                <ul class="pagination">
                    <li class="disabled">
                        <a href="#!">
                            <span><i class="mdi mdi-chevron-left"></i></span>
                        </a>
                    </li>
                    <li class="active"><a href="#">1</a></li>
                    <li><a href="#!">2</a></li>
                    <li><a href="#!">3</a></li>
                    <li><a href="#!">4</a></li>
                    <li><a href="#!">5</a></li>
                    <li>
                        <a href="#!">
                            <span><i class="mdi mdi-chevron-right"></i></span>
                        </a>
                    </li>
                </ul>
            </nav>

        </div>
    </div>
</div>
<script type="text/javascript">

    function toggleAll(source) {
        var checkboxes = document.querySelectorAll('input[type="checkbox"]');

        checkboxes.forEach(function(checkbox) {
            checkbox.checked = source.checked;
        });
    }

    function increaseQuantity() {
        var quantityElement = document.getElementById("quantity");
        var quantity = parseInt(quantityElement.textContent);
        quantityElement.textContent = quantity + 1;
    }

    function decreaseQuantity() {
        var quantityElement = document.getElementById("quantity");
        var quantity = parseInt(quantityElement.textContent);
        if (quantity > 1) {
            quantityElement.textContent = quantity - 1;

        }
    }
</script>
<script>
    var jg = document.getElementById("pro_price").innerHTML;
    var zd = document.getElementById("all_price");
    zd.innerText = jg;

    function action_confirm(product_id) {
        var an= document.getElementById("button-confirm-"+product_id);
        var an2= document.getElementById("button-update-"+product_id);
        var wb = document.getElementById("myDiv");

        if (wb.style.display === "none") {
            wb.style.display = "block";
            an2.style.display = "block";
            an.style.display = "none";
            math.style.display = "none";
        } else {
            wb.style.display = "none";
        }
    }
    function action_update(product_id) {
        var an= document.getElementById("button-confirm-"+product_id);
        var an2= document.getElementById("button-update-"+product_id);
        var wb = document.getElementById("myDiv");
        if (an.style.display === "none"){
            var input = document.getElementById("math_input");
            var inputDate = input.value;
            var div = document.getElementById("math");
            div.innerHTML = inputDate;
            wb.style.display = "none";
            an2.style.display = "none";
            an.style.display = "block";
            math.style.display = "block";
            var sl = document.getElementById("math_input").value;
            var jg = document.getElementById("pro_price").innerHTML;
            var num1 = parseFloat(sl);
            var num2 = parseFloat(jg);
            var zj = num1*num2;
            document.getElementById("all_price").innerHTML = zj;
        }else {
            wb.style.display = "block";
        }
    }

</script>
<script>
    function get_page(token,page) {
        this_page=page;
        var data=product_buyer_cart_list(token,page);
        var productHtmlString = "";
        if(data.products.length===0){
            document.getElementById("product-buyer-cart-list").innerHTML = "<div class=\"row text-center\"><div>无搜索结果</div></div>";
            return;
        }
        for (let i = 0; i < data.products.length; i++) {
            var product = data.products[i];
            var productId = product.productId;
            var title = product.title;
            var price = product.price;
            var number = product.number;
            var filePath = product.filePath;
            productHtmlString+=
                "                            <th class=\"text-center\" scope=\"row\"><input name=\"dx\" type=\"checkbox\" /></th>\n" +
                "                            <td class=\"text-center\" style=\"\"><img class=\"gwc_tp text-center\" src=\""+filePath+"\" alt=\"\"></td>\n" +
                "                            <td style=\"height:80px;width: 30% \"><div >"+title+" </div></td>\n" +
                "                            <td class=\"text-center\" style=\"line-height: 50px\">\n" +
                "                                <div id=\"pro_price\">"+price+"</div>\n" +
                "                            </td>\n" +
                "                            <td class=\"text-center\" style=\"line-height: 50px\">\n" +
                "                                <div id=\"myDiv\" style=\"display: none\">\n" +
                "                                    <input id=\"math_input\" style=\"width: 50px;height: 20px\" type=\"text\" >\n" +
                "                                </div>\n" +
                "                                <div id=\"math\" >"+number+"</div>\n" +
                "                            </td>\n" +
                "                            <td class=\"text-center\" style=\"line-height: 50px \"><div id=\"all_price\"></div></td>\n" +
                "                            <td class=\"\" style=\"line-height: 50px;display: flex\">\n" +
                "                                <a id=\"button-confirm-1\" style=\"flex: 1\" href=\"#\" onclick=\"action_confirm(1) \">修改</a>\n" +
                "                                <a id=\"button-update-1\" style=\"flex: 1;display: none\" href=\"#\"  onclick=\"action_update(1)\">确定</a>\n" +
                "                                <a href=\"\" style=\"width: 50%\">删除</a>\n" +
                "                            </td>\n";
        }
        document.getElementById("product-car-list").innerHTML = productHtmlString;
        load_page_nav(Math.ceil(data.total / 20), page);
    }
</script>

</body>
</html>